<template>
  <a-menu
    id="menu"
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    style="width: 100%"
    mode="inline"
    :items="items"
    @click="handleClick"
  ></a-menu>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import router from '@/router/index'
let routes = router.options.routes
const routerMap = routes.map((item) => {
  return {
    label: item.name,
    title: item.name,
    key: item.name,
    path: item.path
  }
})
const selectedKeys = ref(['home'])
const openKeys = ref(['home'])
const items = reactive(routerMap)
const handleClick = (e) => {
  router.push({
    path: e.item.originItemValue.path
  })
}
watch(openKeys, (val) => {
  selectedKeys.value = val.item.originItemValue?.path
  router.push({
    path: val.item.originItemValue?.path
  })
})
</script>
